<template>
  <div class="body">
     <side-bar></side-bar>
     <Header></Header>
     <div class="text1">存证证据数据统计:</div>
     <div class="box">
       <div class="inlinebox">
         <div class="left">今日新增:</div>
         <div class="right">10</div>
       </div>
        <div class="inlinebox">
          <div class="left">昨日新增:</div>
          <div class="right">10</div>
        </div>
         <div class="inlinebox">
           <div class="left">累计新增:</div>
           <div class="right">40</div>
         </div>
     </div>
      <div class="text2">文件新增趋势:</div>
     <div id="chartLineBox" style="width: 75%;height: 50vh;"> </div>
     <div class="text3">所有存证信息:</div>
     <div class="table">
     <alltable></alltable>
     </div>
     
     
  </div>
</template>

<script>
import * as echarts from 'echarts'
import SideBar from '.././components/common/SideBar'
import Header from '.././components/content/Header'
import Alltable from '.././components/content/Alltable'

export default{
 
  name: 'Home',
  
  components: {
   SideBar,
   Header,
   Alltable
  },
  mounted(){
        this.chartLine = echarts.init(document.getElementById('chartLineBox'));
 
        // 指定图表的配置项和数据
        var option = {
            tooltip: {              //设置tip提示
                trigger: 'axis'
            },
            
            legend: {               //设置区分（哪条线属于什么）
                data:['存证数量']
            },
            color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
            xAxis: {                //设置x轴
                type: 'category',
                boundaryGap: false,     //坐标轴两边不留白
                data: ['2021-10-11', '2021-10-12', '2021-10-13', '2021-10-14', '2021-10-15', '2021-10-16', '2021-10-17','2021-10-18','2021-10-19','2021-10-20','2021-10-21','2021-10-22','2021-10-23','2021-10-24','2021-10-25','2021-10-26','2021-10-27','2021-10-28',],
                name: '日期',           //X轴 name
                nameTextStyle: {        //坐标轴名称的文字样式
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 0, 20]
                },
                axisLine: {             //坐标轴轴线相关设置。
                    lineStyle: {
                        color: '#FA6F53',
                    }
                }
            },
            yAxis: {
                name: '存证数量',
                nameTextStyle: {
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 10, 0]
                },
                axisLine: {
                    lineStyle: {
                        color: '#FA6F53',
                    }
                },
                type: 'value'
            },
            series: [
              
              {
                name: '存证数量',
                data: [15, 7, 24, 40, 20, 30, 40],
                smooth: true,
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#FA6F53',
                    }
                },
              }
          ]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        this.chartLine.setOption(option);
    },
  methods: {
      
    }
}

</script>

<style scoped>
/* .body{
  text-align:center;
} */
.text1{
  position:absolute;
  top:125px;
  left:400px;
  font-size:20px;
}
.text2{
  position:absolute;
  top:295px;
  left:400px;
  font-size:20px;
}
.text3{
  position:absolute;
  top:815px;
  left:400px;
  font-size:20px;
}
.table{
  position:absolute;
  top:850px;
  left:450px;
  width: 1200px;
}
.box{
  position:absolute;
  top:165px;
  left:450px;
  display:flex;
  width:60%;
  
  align-items: center;
   
  }
.inlinebox{
  flex:1;
  text-align:left;
  background-color:#fff;
  border: 1px solid #eee;
  margin-right:12px;
  border-radius:10px;
  height:100px;
  display:flex;
  
}
.left{
  margin-top:37px;
  margin-left:19px;
  margin-right:190px;
  font-size:20px;
}
.right{
  margin-top:37px;
}

#chartLineBox{
  position:absolute;
  top:340px;
  left:400px;
 
}



</style>